<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册与登录</title>
    <link rel="stylesheet" href="./css/login.css">
    <script src="https://code.jquery.com/jquery-latest.js" defer></script>
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="pre-box">
                <h1>欢迎</h1>
                <div class="img-box">
                    <img src="./assets/imgs/img3.jpg" alt="">
                </div>
            </div>
            <!-- 注册盒子 -->
            <div class="register-form">
                <div class="title-box">
                    <h1>注册</h1>
                </div>
                <form id="registerForm">
                    <div class="input-box">
                        <input type="text" placeholder="用户名(字母、数字和下划线, 4-20位)" name="username" id="user_name">
                        <input type="password" placeholder="密码(字母和数字, 至少8位)" name="password" id="Pass_word">
                        <input type="password" placeholder="确认密码" name="password_again" id="Passwordrepeat">
                        <input type="email" placeholder="邮箱" name="email" id="email">
                    </div>
                    <div class="btn-box">
                        <button type="button" id="register">注册</button>
                        <p onclick="mySwitch()">已有账号?去登录</p>
                    </div>
                </form>
            </div>
            <!-- 登录盒子 -->
            <div class="login-form">
                <div class="title-box">
                    <h1>登录</h1>
                </div>
                <form id="loginForm">
                    <div class="input-box">
                        <input type="text" placeholder="用户名" name="username" id="logusername">
                        <input type="password" placeholder="密码" name="password" id="logpassword">
                    </div>
                    <div class="btn-box">
                        <button type="button" id="login">登录</button>
                        <p onclick="mySwitch()">没有账号?去注册</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

<script>
    // 滑动切换注册/登录盒子
    let flag = true;
    const mySwitch = () => {
        if (flag) {
            $(".pre-box").css("transform", "translateX(100%)");
            $(".pre-box").css("background-color", "#667b5f");
            $("img").attr("src", "./assets/imgs/img2.jpg");
        } else {
            $(".pre-box").css("transform", "translateX(0%)");
            $(".pre-box").css("background-color", "#435c67");
            $("img").attr("src", "./assets/imgs/img3.jpg");
        }
        flag = !flag;
    };
    const adminAccounts = [
        { username: "admin1", password: "adminpass1" },
        { username: "admin2", password: "adminpass2" },
        { username: "admin3", password: "adminpass3" },
        { username: "admin4", password: "adminpass4" },
    ];

    // 注册功能
    document.getElementById("register").addEventListener("click", function () {
        const username = document.getElementById("user_name").value.trim();
        const password = document.getElementById("Pass_word").value;
        const passwordRepeat = document.getElementById("Passwordrepeat").value;
        const email = document.getElementById("email").value.trim();

        // 验证用户名
        if (!/^\w{4,20}$/.test(username)) {
            alert("用户名只能包含字母、数字和下划线，长度为4-20个字符！");
            return;
        }
        // 验证密码
        if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {
            alert("密码至少8位，必须包含字母和数字！");
            return;
        }
        // 验证重复密码
        if (password !== passwordRepeat) {
            alert("两次输入的密码不一致！");
            return;
        }
        // 验证邮箱
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            alert("请输入有效的邮箱地址！");
            return;
        }
        // 检查用户名是否已存在
        if (localStorage.getItem(username)) {
            alert("用户名已存在，请选择其他用户名！");
            return;
        }

        // 加密密码并保存到 localStorage
        const encryptedPassword = CryptoJS.SHA256(password).toString();
        localStorage.setItem(username, JSON.stringify({ password: encryptedPassword, email }));

        alert("注册成功！正在跳转...");
        setTimeout(() => {
            window.location.href = "index.html";
        }, 1000);
    });

    // 登录功能
    document.getElementById("login").addEventListener("click", function () {
        const username = document.getElementById("logusername").value.trim();
        const password = document.getElementById("logpassword").value;

        // 检查用户名是否存在
        const userData = localStorage.getItem(username);
        if (adminAccounts.some(admin => admin.username === username && admin.password === password)) {
            alert("管理员登录成功！");
            window.location.href = "views/admin.html";
            return;
        }

        if (!userData) {
            alert("用户名不存在！");
            return;
        }

        // 验证密码
        const storedData = JSON.parse(userData);
        const encryptedPassword = CryptoJS.SHA256(password).toString();
        if (storedData.password !== encryptedPassword) {
            alert("密码错误！");
            return;
        }

        alert("登录成功！正在跳转...");
        setTimeout(() => {
            window.location.href = "views/intro.html";
        }, 1000);
    });
</script>
</html>
